<template>
    <fieldset>
        <legend>users</legend>
        <h1>{{ msg }}</h1>
        <h1>{{ name }}</h1>
        <h1>{{ reverseMsg }}</h1>
        <button @click="CHANGE_NAME('55开')">点击更改vuex中的name</button>
        <button @click="simple">一个简单粗暴的按钮</button>
    </fieldset>
</template>
<script>
//使用辅助函数来访问state
//面试题:为什么状态不映射在data中,要映射在组件的computed中?
//如果使用辅助函数是可以映射在data中的,因为映射过来的是两个函数,所以使用的时候要加上括号,而computed中的属性,恰好要写成函数的形式 所以映射在computed中更合适

//没有使用辅助函数的情况下能不能放到data中,因为这样视图可能不响应,不更新

//mutations要映射在mehtods选项中

import { mapState, mapGetters, mapMutations } from "vuex"
export default {
    data() {
        return {
            // ...mapState(['msg', 'name'])
            //这样写初次视图能够显示,后续state变更的时候视图是不会响应的
            // name: this.$store.state.name
        }
    },
    //语法
    //映射到computed
    computed: {
        ...mapState(['msg', 'name']),
        msg() {
            return this.$store.state.msg
        },
        ...mapGetters(['reverseMsg'])
    },
    mounted() {
        console.log({ ...mapState(['name', 'msg']) })
    },
    methods: {
        // change() {
        //     //提交Mutation 使用commit方法

        //     this.$store.commit('CHANGE_NAME',"卢本伟")
        // }

        ...mapMutations(['CHANGE_NAME']),
        simple() {
            //简单粗暴的修改vuex中的name属性
            this.$store.state.name = "丑开"
            //vuex变成一个全局的单例对象
            //并且要以一定的规则去操纵它
            //提升代码的维护性
        }
    }
}
</script>